// pages/discover/discover.js
import request from '../../utils/request';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 轮播图
    banners: [],
    // 推荐歌单
    songSheets: [],
    // 热门标签
    hotTags: [],
    // 歌单名称
    hotSheetName: '',
    // 热门歌曲
    hotSongs: [],
    currentHotTagIndex: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    const type = this._getSystemType();
    /*
      发送请求注意事项
      1. 小程序只可以跟指定的域名进行网络通信。
        登录微信公众平台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 开始配置
      2. 域名：必须https，必须备案，不能是ip地址
        以上上线微信小程序必须要满足的条件

        开发阶段，微信开发者调试工具 -> 详情 -> 本地设置 -> 勾选 不校验合法域名
        这样开发阶段就能使用 http://localhost:3000 服务器了
      3. 不允许与本机 IP 通信。
      4. 默认超时时间和最大超时时间都是 60s
         超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置。
      5. 发送请求最大并发限制是 10 个
      6. 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。
    */
    // wx.request({
    //   url: `http://localhost:3000/banner?type=${type}`,
    //   success: (res) => {
    //     // 首先判断响应状态码
    //     if (res.statusCode >= 200 && res.statusCode < 300) {
    //       // 200 - 299 都算成功：请求成功
    //       if (res.data.code === 200) {
    //         // 功能成功
    //         this.setData({
    //           banners: res.data.banners.map(item => {
    //             return {
    //               id: item.bannerId,
    //               pic: item.pic,
    //               typeTitle: item.typeTitle,
    //               titleColor: item.titleColor
    //             }
    //           })
    //         })
    //       } else {
    //         // 功能失败
    //         wx.showToast({
    //           title: '功能失败',
    //           icon: 'error'
    //         })
    //       }
    //     } else {
    //       // 失败：404 500：请求失败
    //       wx.showToast({
    //         title: '请求失败',
    //         icon: 'error'
    //       })
    //     }
    //   },
    //   fail(res) {
    //     // 网络超时，未连接网络
    //     wx.showToast({
    //       title: '网络超时或未连接网络',
    //       icon: 'error'
    //     })
    //   },
    // })
    const res = await request(`/banner?type=${type}`)
    this.setData({
      banners: res.banners.map(item => {
        return {
          id: item.bannerId,
          pic: item.pic,
          typeTitle: item.typeTitle,
          titleColor: item.titleColor
        }
      })
    })
  },
  // 获取操作系统的类型
  _getSystemType() {
    const res = wx.getSystemInfoSync();
    // 判断操作系统
    let type = 0;
    if (res.system.indexOf('iOS') > -1) {
      type = 2
      if (res.model.indexOf('iPad') > -1) {
        type = 3
      }
    } else if (res.system.indexOf('Android') > -1) {
      type = 1;
    }
    return type;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    this._getSongSheets();
    this._getHotTags();
  },

  // 获取热门标签
  async _getHotTags() {
    const res = await request('/playlist/highquality/tags');
    this.setData({
      hotTags: res.tags.slice(0, 5).map(item => item.name)
    })

    this._getHotSongs(this.data.currentHotTagIndex);
  },
  
  // 获取标签对应的歌曲
  async _getHotSongs(index) {
    // 歌单
    const songSheet = await request('/top/playlist/highquality', {
      cat: this.data.hotTags[index],
      limit: 1
    });
    const { id, name } = songSheet.playlists[0];
    // 歌曲
    const songs = await request('/playlist/track/all', {
      id,
      limit: 12 // 3的倍数
    });

    /*
      现有数据：[12条数据]
      输出数据：[{ id: xxx, songs: [3条数据] }] 4条数据
    */

    const list = songs.songs.map(item => {
      return {
        id: item.id,
        picUrl: item.al.picUrl,
        name: item.name,
        author: item.ar.map(item => item.name).join(' / ')
      }
    })

    const length = list.length / 3; // 4

    const hotSongs = [];

    for (let i = 0; i < length; i++) {
      hotSongs.push({
        id: i + 1,
        songs: list.splice(0, 3)
      })
    }

    this.setData({
      hotSheetName: name,
      hotSongs
    })
  },

  // 刷新热门歌曲
  refreshHotSongs() {
    // 动画效果
    // 文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html
    this.animate('.icon-shuaxin', [{ rotate: 0 }, { rotate: 360 }], 500);
    let currentHotTagIndex = this.data.currentHotTagIndex + 1;
    if (currentHotTagIndex >= this.data.hotTags.length) {
      currentHotTagIndex = 0;
    }
    this.setData({
      currentHotTagIndex
    })
    // 请求新的数据
    this._getHotSongs(currentHotTagIndex);
  },

  // 获取推荐歌曲
  async _getSongSheets() {
    const res = await request('/personalized', {
      limit: 10
    });
    this.setData({
      songSheets: res.result.map(item => {
        return {
          id: item.id,
          picUrl: item.picUrl,
          name: item.name,
          playCount: this._calcPlayCount(item.playCount)
        }
      })
    })
  },

  _calcPlayCount(count) {
    return Math.round(count / 10000) + '万'
  },

  // 跳转到每日推荐
  goDialyRecommendation() {
    wx.navigateTo({
      url: '/music/pages/daily-recommendation/daily-recommendation',
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  // 分享给用户
  onShareAppMessage() {
    // https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object
    // return的结果就是分享的内容
    return {
      title: '硅谷云音乐',
      path: '/pages/discover/discover',
      imageUrl: '/static/images/logo.jpeg'
    }
  },
  // 分享给朋友圈
  onShareTimeline() {
    return {
      title: '硅谷云音乐',
      imageUrl: '/static/images/logo.jpeg'
    }
  },
})